<template>
	<view v-if="display" class="interview-list-block">
		<view class="interview-content">
			<view class="title-block">
				<view class="card-title">视频面试</view>
				<view @click="closeCard" class="close">关闭</view>
			</view>
			<view class="content-block">
				<block v-if="list.length>0">
					<view v-for="(item,index) in list" :key="item.id" class="interview-item">
						<view @click="navigate(item.id)" class="interview-info">
							<view class="interview-position" v-if="item.minSalary">{{item.jobTitle}} ·
								{{item.minSalary}}-{{item.maxSalary}}元
							</view>
							<view class="interview-position" v-else>{{item.jobTitle}} · 面议</view>
							<view class="time">面试时间：{{item.interviewTime}}</view>
						</view>
						<view class="btn-block">
							<view v-if="item.plan==1" @click="navigate(item.id)" class="status-btn disabled">面试待接受
							</view>

							<view v-if="item.plan==2&&item.timeTest==1&&identity==1" class="status-btn disabled">待对方发起面试
							</view>
							<view v-if="item.plan==2&&item.timeTest==1&&identity==2" @click="startInterview(item.id)"
								class="status-btn">发起面试</view>
							<view v-if="item.plan==2&&item.timeTest==1&&identity==2" @click="endInterview(item.id)"
								style="color: #0256FF;border: 1px solid #0256FF;background: none;" class="status-btn">
								结束面试</view>
							<view v-if="item.plan==2&&item.timeTest==2" class="status-btn disabled">未到面试时间</view>

							<view v-if="item.plan==3" class="status-btn disabled">面试结束</view>
							<view v-if="item.plan==4&&identity==1" class="status-btn disabled">已拒绝</view>
							<view v-if="item.plan==4&&identity==2" class="status-btn disabled">对方已拒绝</view>
						</view>


						<view @click="tips(item)" v-if="item.plan!=3" class="tips iconfont icon-wenti"></view>
						<view v-else style="visibility: hidden;" class="tips iconfont icon-wenti"></view>
					</view>
				</block>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInterviewRecordList,
		submitInterview
	} from '@/api/interview.js';
	import {
		getToAccount,
		getPhoneByImUserID
	} from '@/util/im.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			}
		},
		props: {
			display: {
				type: Boolean,
				default: false
			},
			conversation: { //当前会话
				type: Object,
				default: {}
			}
		},
		watch: {
			display(e) {
				if (e) {
					this.getList();
				}
			}
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const userID = getToAccount(this.conversation);
				const mobile = getPhoneByImUserID(userID);
				getInterviewRecordList({
					userType: this.identity,
					mobile
				}).then((res) => {
					uni.hideLoading()
					this.list = res;
				}).catch((res) => {
					uni.hideLoading();
					this.showToast('加载失败，请重试');
				})
			},
			closeCard() {
				uni.$emit('closeCard', 'displayInterview')
			},
			navigate(id) {
				this.closeCard();
				let url = ''
				const isMine = this.identity == 2;
				const userID = getToAccount(this.conversation);
				url = `/page_other/interview/view?id=${id}&isMine=${isMine}&userID=${userID}`;
				uni.navigateTo({
					url
				});
			},
			startInterview(id) {
				uni.showModal({
					title: '提示',
					content: '确定发起面试吗',
					success: (e) => {
						if (e.confirm) {
							this.closeCard();
							uni.$emit('startInterview', id);
						}
					}
				})
			},
			endInterview(id) {
				uni.showModal({
					title: '提示',
					content: '确定结束面试吗',
					success: (e) => {
						if (e.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							submitInterview({
								id,
								plan: 3
							}).then((res) => {
								uni.hideLoading();
								this.showToast('操作成功', () => {
									this.getList();
								})
							}).catch((res) => {
								uni.hideLoading();
								this.showToast('操作失败');
							})
						}
					}
				})
			},
			tips(data) {
				const plan = data.plan;
				const timeTest = data.timeTest;
				let msg = '';
				switch (plan) {
					case 1:
						msg = this.identity == 1 ? '对方向您发起了面试邀请，请点击邀请消息或面试列表处理' : '已发送面试邀请，等待对方接受'
						break;
					case 2:
						if (timeTest == 1) {
							msg = this.identity == 1 ? '面试时间已到，请在聊天页等待对方发起面试' : '面试时间已到，请尽快发起面试'
						} else {
							msg = '未到面试时间，请按时参加面试'
						}
						break;
					case 3:
						msg = '面试已结束';
						break;
					case 4:
						msg = this.identity == 1 ? '您已拒绝面试邀请' : '对方拒绝了面试邀请';
						break;
				}
				uni.showModal({
					title: '提示',
					content: msg,
					showCancel: false,
					confirmText: '知道了'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.interview-list-block {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.interview-content {
		position: absolute;
		width: 100%;
		height: 60%;
		bottom: 0;
		background: #F4F5F9;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 200;

		.title-block {
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 80rpx;
			border-bottom: 1px solid #efefef;

			.card-title {
				flex-grow: 1;
			}

			.close {
				color: #0256FF;
				flex-grow: 0;
			}
		}

		.content-block {
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			overflow-y: scroll;
			height: calc(100% - 80rpx);

			.interview-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #efefef;

				.interview-info {
					width: calc(100% - 280rpx);
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					height: 100%;

					.time {
						font-size: 28rpx;
						color: #999;
						margin-top: 10rpx;
					}

					view {
						width: 100%;
						flex: none;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.btn-block {
					width: 210rpx;

					.status-btn {
						background: #0256FF;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 60rpx;
						width: 100%;
						padding: 0 16rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}

					.status-btn:nth-child(2) {
						margin-top: 16rpx;
					}
				}

				.status-btn.disabled {
					background: #e5e5e5;
					color: #999;
				}

				.tips {
					color: #999;
					font-size: 44rpx;
					margin-left: 20rpx;
				}
			}

			.interview-item:last-child {
				border-bottom: none;
			}
		}
	}
</style>